<template>
  <div>
    <el-form border label-width="80px">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" v-model="spuInfo.spuName"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <!-- v-model: 返回的是 options中 value 收集的数据: 将收集到的 Id 放入 spuInfo 里面 -->
        <el-select v-model="spuInfo.tmId" placeholder="请选择品牌">
          <el-option
            :label="tradeMake.tmName"
            :value="tradeMake.id"
            v-for="tradeMake in tradeMakeList"
            :key="tradeMake.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input type="textarea" rows="3" placeholder="描述" v-model="spuInfo.description"></el-input>
      </el-form-item>
      <el-form-item label="SPU图片">
        <!-- 
          照片墙
         action: 地址
         list-type： 展示的类型，
         file-list: 展示多种图片 类型为 array
         on-preview： 放大回调
         on-remove： 删除回调
        -->
        <el-upload
          action="/dev-api/admin/product/fileUpload"
          list-type="picture-card"
          :file-list="spuImageList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <!-- 输入框 -->
        <el-select v-model="saleIdAndSaleName" :placeholder="`还有${3-spuInfo.spuSaleAttrList.length}未选中`">
          <el-option :label="selectSale.name" :value="`${selectSale.id}:${selectSale.name}`" v-for="selectSale in unSelectSaleAttr" :key="selectSale.id"></el-option>
        </el-select>
        <!-- 只有有 Id 的时候才能点击 （Id就是输入框有值时会传入）:disabled="!saleIdAndSaleName" -->
        <el-button :disabled="saleIdAndSaleName === ''" style="margin-left:10px;" type="primary" icon="el-icon-plus"  @click="addSaleAttr">添加销售属性</el-button>
        <!-- 内容 表格部分 -->
        <el-table border :data="spuInfo.spuSaleAttrList">
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="saleAttrName" label="属性名" width="150"></el-table-column>
          <el-table-column prop="spuSaleAttrValueList" label="属性值列表" width="width">
            <template slot-scope="{row}">
              <!--  @close="handleClose(tag)" -->
              <!-- 
                closable： 是否发关闭
                :disable-transitions: 添加过度动画
               -->
              <el-tag :key="tag.id" v-for="tag in row.spuSaleAttrValueList" closable :disable-transitions="false" @close="handleClose(tag,row)">{{tag.saleAttrValueName}}</el-tag>
              <!-- @keyup.enter.native="handleInputConfirm"
                 @click="showInput"-->
              <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" ref="saveTagInput" size="small" @blur="handleInputConfirm(row)"></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="addSaleValue(row)">添加</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="150">
            <template slot-scope="{row,$index}">
              <!-- <el-popconfirm title="这是一段内容确定删除吗？" >
                  <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @onconfirm='deleteSaleAttr'></el-button>
              </el-popconfirm> -->
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="deleteSaleAttr(row,$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSpuOrUpdateSpu">保存</el-button>
        <el-button type="default" @click="cancelButton">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
  name: "SpuFrom",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      isShowCont:'', // 控制搜索框是否可以搜索
      spuInfo: {
        category3Id: 0, // 三级id
        description: "", // 描述内容
        tmId: undefined,
        spuName: "", // 品牌名称
        // 图片信息
        spuImageList: [
        ],
        // 销售属性信息
        spuSaleAttrList: [
        ], 
      },
      tradeMakeList: [], // 存储品牌信息
      spuImageList: [], // 存储Spu图片数据
      spuSaleAttrList: [], // 存储 销售数据
      // 收集未选择销售属性Id
      saleIdAndSaleName:''
    };
  },
  computed:{
    // 过滤掉销售属性
    unSelectSaleAttr(){
      // 整个平台就三个属性： 尺码、颜色、版本
      // 当前Spu的属性为： 颜色，版本
      // 最后返回结果为 尺码
      return this.spuSaleAttrList.filter(item => {
        return this.spuInfo.spuSaleAttrList.every(item1 => {
          return item.name != item1.saleAttrName
        })  
      })
    }
  },
  methods: {
    // 删除图片事件
    handleRemove(file, fileList) {
      // file: 删除图片信息， fileList: 删除之后，剩下所有图片信息
      // console.log(file, fileList);
      this.spuImageList = fileList


    },
    // 图片放大时事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功时回调
    uploadSuccess(response, file, fileList){
      // console.log(response, file, fileList)
      // response: 上传时接口返回的数据
      // file：上传的那张图片
      // fileList: 上传成功后的 所有图片
      this.spuImageList = fileList
    },
    // 初始化 Spu 数据
    async initSpuData(spu,category3Id,isShowCont) {
      this.isShowCont = isShowCont
      // 获取Spu信息
      let spuResult = await this.$api.spu.reqSpuInfo(spu.id);
      if (spuResult.code === 200) {
        this.spuInfo = spuResult.data;
        this.spuInfo.category3Id = category3Id
      }

      // 获取品牌列表
      let tradeMakeResult = await this.$api.spu.reqTradeMakeList();
      if (tradeMakeResult.code === 200) {
        this.tradeMakeList = tradeMakeResult.data;
      }

      // 获取图片信息
      let spuImageResult = await this.$api.spu.reqSpuImageList(spu.id);
      if (spuImageResult.code === 200) {
        let imgList = spuImageResult.data;
        // 因为 elementUi 中照片墙必须携带 name和url 所以往里面添加两个值
        imgList.forEach(item => {
          item.name = item.imgName;
          item.url = item.imgUrl;
        });
        this.spuImageList = imgList;
      }

      // 获取所有销售属性
      let saleResult = await this.$api.spu.reqBaseSaleAttrList();
      if (saleResult.code === 200) {
        this.spuSaleAttrList = saleResult.data;
      }
    },
    // 添加销售属性
    addSaleAttr(){
      // 当天加销售属性时 必须的收集对应的 Id 和 name 然后 push 到表格里面去
      // 收集数据 baseSaleAttrId、saleAttrName、spuSaleAttrValueList
      let [baseSaleAttrId,saleAttrName] = this.saleIdAndSaleName.split(':')
      // 收集数据为对象
      let newSaleAttr = {baseSaleAttrId,saleAttrName,spuSaleAttrValueList:[]}
      // 向表格 push 数据
      this.spuInfo.spuSaleAttrList.push(newSaleAttr)
      // 添加完后 清空销售框内容
      this.saleIdAndSaleName = ''
    },
    // 添加销售值
    addSaleValue(row){
      // 控制每一项是否显示输入框
      this.$set(row,'inputVisible',true)
      // v-model 收集销售值数据
      this.$set(row,'inputValue','')
      
    },
    // el-input失去焦点事件
    handleInputConfirm(row){
      // 收集用户添加的销售值 baseSaleAttrId、 inputValue
      let {baseSaleAttrId,inputValue} = row
      // 属性值不能重复
      let result = row.spuSaleAttrValueList.some(item => item.saleAttrValueName === row.inputValue)
      // 如果有相同的数 终止执行（不会失去焦点）
      if(result){
        this.$message({message:'添加值相同，请重新输入',type:'error'})
         return false
      }else if(inputValue.trim() === ""){
        this.$message({message:'不能添加空值',type:'error'})
        return false
      } 
      // 失去焦点变回 button
      row.inputVisible = false
      // 聚合数据
      let newSaleAttrValue = {baseSaleAttrId,saleAttrValueName:inputValue}
      // 向属性值 push 数据
      row.spuSaleAttrValueList.push(newSaleAttrValue)
    },
    // 属性值删除某一项事件
    handleClose(tag,row){
      // tag: 删除的一项数据
      row.spuSaleAttrValueList.forEach((item,index) => {
        if(tag === item){
          row.spuSaleAttrValueList.splice(index,1)
        }
      })
    },
    // 删除整行 saleAttr
    deleteSaleAttr(row,index){
      this.spuInfo.spuSaleAttrList.splice(index,1)
    },
    // 保存或者更新 spu 信息
    async saveSpuOrUpdateSpu(){
      // 整理参数 只有 imageList 是没放进 spu 的， 所以整理图片就行
      // 服务器只需要携带 imgName、imgUrl 就行， 所以 map 遍历定义这两个就ok
      this.spuInfo.spuImageList = this.spuImageList.map(item => {
        return {
          imgName: item.name,
          imgUrl: (item.response && item.response.data) || item.url
        }
      })
      // 保存数据请求
      let result = await this.$api.spu.reqSaveSpuOrUpdateSpuInfo(this.spuInfo)
      if(result.code === 200){
        // 成功提示
        this.$message({message:this.spuInfo.id?'修改成功':'添加成功',type:'success'})
        // 返回数据列表
        this.$emit('cancel',{flag:0,biaoshi:this.spuInfo.id ? '修改':'添加',isShowCont:this.isShowCont})
      }
      // 保存后 清空spu编辑页面
      Object.assign(this._data,this.$options.data())
    },
    // 利用父组件触发的事件 添加spu
    async addSpuInfo(category3Id){
      this.spuInfo.category3Id = category3Id
      // 请求数据
      // 获取品牌列表
      let tradeMakeResult = await this.$api.spu.reqTradeMakeList();
      if (tradeMakeResult.code === 200) {
        this.tradeMakeList = tradeMakeResult.data;
      } 

      // 获取所有销售属性
      let saleResult = await this.$api.spu.reqBaseSaleAttrList();
      if (saleResult.code === 200) {
        this.spuSaleAttrList = saleResult.data;
      }
    },
    // 取消事件 回到数据列表
    cancelButton(){
      this.$emit('cancel',{flag:0,biaoshi:this.spuInfo.id ? '修改':'添加',isShowCont:this.isShowCont})
      // 当点击取消时 清空编辑里面所有数据 
      // this.$options: 配置对象
      Object.assign(this._data,this.$options.data())
    }
  }
};
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>